@gutter: 1.041666667vw;
@containerGutter: 2.083333333vw;
@center-val-font: 0.725vw;

.container {
    width: 100vw;
    height: 100vh;
    background: url("img/bg.jpg") no-repeat center;
    background-size: 100% 100%;
}

header {
    width: 100vw;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.second-row {
    width: 100vw;
    height: 57vh;
    display: flex;
}
.exit-full-screen {
    width: 2.083333333vw;
    height: 3.703703704vh;
    background: url("./img/exitFulltScreen.png") no-repeat center;
    background-size: 100% 100%;
    margin-bottom: 0.3125vw;
    cursor: pointer;
}
.full-screen {
    width: 2.083333333vw;
    height: 3.703703704vh;
    background: url("./img/fullScrenn.png") no-repeat center;
    background-size: 100% 100%;
    margin-bottom: 0.3125vw;
    cursor: pointer;
}
.three-row {
    width: 100vw;
    height: 35vh;
    padding: @gutter @containerGutter;
}

.title {
    width: 44vw;
    height: 100%;
    background: url("img/title.jpg") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-name {
    font-size: 1.5625vw;
    font-family: PingFang-SC-Heavy;
    color: #DBEDFF;
    letter-spacing: 0.208333333vw;
    margin: 0 1.041666667vw;
}

.title-side {
    color: #4FD9FC;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-side-val {
    font-size: 0.833333333vw;
    letter-spacing: 0.104166667vw;
}

.side-width {
    width: 33vw;
    height: 100%;
}

.left-cell {
    height: 100%;
}

.right-cell {
}

.center-cell {
    width: 34vw;
    height: 100%;
    padding-top: 0.833333333vw;
    padding-left: 1.041666667vw;
    padding-right: 1.041666667vw;
}

.center-content {
    width: 100%;
    height: 100%;
    background: url("img/globe.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.second-row-content {
    height: 100%;
    overflow: hidden;
}

.small-frame {
    background: url("img/module-item.png") no-repeat center;
    background-size: 100% 100%;
}

.big-frame {
    background: url("img/big-module-item.png") no-repeat center;
    background-size: 100% 100%;
}

.label-icon {
    width: @containerGutter;
    height: 3.518518519vh;
    background: url("img/arrow.png") no-repeat center;
    background-size: 100% 100%;
    margin-left: 0.520833333vw;
}

.label-name {
    color: #afdeff;

}
.module-item-content {
    height: calc(100% - 3.703703704vh);
    display: flex;
    justify-content: center;
    align-items: center;
}

.label-bar {
    height: 3.703703704vh;
    display: flex;
    align-items: center;
    //font-size: 19px;
    font-size: 0.989583333vw;
    font-weight: bold;
}

.table-header {
    width: 100%;
    height: 4.074074074vh;
    border: solid 1px #175ea3;
    display: flex;
    align-items: center;
    background: #152b44;
    opacity: .8;
    font-size: 0.9375vw;
    font-weight: bold;
    color: #c8cdd2;
    margin-top: 0.925925926vh;
}

.item-padding {
    padding: 0.925925926vh 1.666666667vw 0 1.666666667vw;
}

.table-cell {
    width: calc(100% / 5);
    text-align: center;
}

.table-body-row {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.0375vw;
    font-weight: bold;
}

.left-cell-top {
    height: 50%;
    padding-left: @containerGutter;
    padding-bottom: 0.925925926vh;
    //padding-right: @gutter;
}

.left-cell-bottom {
    height: 50%;
    padding-left: @containerGutter;
    //padding-top: 10px;
    //padding-top: 10px;
    padding-top: 0.520833333vw;
    //padding-right: @gutter;
}

.right-cell-top {
    height: 50%;
    padding-right: @containerGutter;
    padding-bottom: 0.925925926vh;
    //padding-left: @gutter;
}

.right-cell-bottom {
    height: 50%;
    padding-right: @containerGutter;
    //padding-top: 10px;
    padding-top: 0.520833333vw;
    //padding-left: @gutter;
}

.frame-content {
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
}

.current-time {
    width: 28vw;
    color: #fff;
    font-size: 1.041666667vw;
    font-weight: bold;
    padding-left: @containerGutter;
    padding-bottom: 0.925925926vh;

}

.current-time-text {
    width: 70%;
    height: 3.703703704vh;
    background: url("img/date-frame.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.520833333vw;
    letter-spacing: 2px;
}

.control-bar {
    width: 28vw;
    display: flex;
    justify-content: flex-end;
    padding-right: @containerGutter;
}

.title-frame {
    //width: 140px;
    width: 7.291666667vw;
    //height: 40px;
    height: 3.703703704vh;
    //line-height: 40px;
    line-height: 3.703703704vh;
    background: url("img/title-frame.png") no-repeat center;
    background-size: 100% 100%;
    margin-top: 0.520833333vw;
    color: #AFDEFF;
    font-size: 0.9375vw;
    font-weight: bold;
    text-align: center;
}
.left-first-label-val {
    position: absolute;
    top: 19.5%;
    left: 12%;
    color: #dedee1;
    //font-size: 12px;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left-second-label-val {
    position: absolute;
    top: 39.5%;
    left: 7%;
    color: #dedee1;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left-three-label-val {
    position: absolute;
    top: 64.5%;
    left: 9%;
    color: #dedee1;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.right-first-label-val {
    position: absolute;
    top: 12.9%;
    left: 70%;
    color: #dedee1;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.center-side-label {
    font-size: 0.729166667vw;
}
.right-second-label-val {
    position: absolute;
    top: 26.9%;
    left: 78%;
    color: #dedee1;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.right-three-label-val {
    position: absolute;
    top: 67.5%;
    left: 78%;
    color: #dedee1;
    font-size: @center-val-font;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.label-val-item {
    line-height: 2.222222222vh;
}
.val-item {
    font-size: 0.833333333vw;
    font-weight: 700;
}
.temperature {
    width: 50%;
    height: 100%;
    background: url("./img/temperature.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    font-size: 1.25vw;
    position: relative;
}

.humidity {
    width: 50%;
    height: 100%;
    background: url("./img/humidity.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    font-size: 1.25vw;
    position: relative;
}

.temperature-humidity-bar {
    width: 100%;
    height: 76%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tem-hum-val {
    margin-bottom: 4.259259259vh;
}

.temperature-label {
    position: absolute;
    top: 34%;
    left: 30%;
    font-size: 0.729166667vw;
}

.humidity-label {
    position: absolute;
    top: 34%;
    left: 30%;
    font-size: 0.729166667vw;
}
